<template>
  <div class="wrap clearfix">
    <div class="location">当前位置：首页<span>&gt;</span><b class="red">购物车</b></div>

    <ShoppingCart 
      :list="list"
      v-model="isCheckAll"
      @deleTe="deleTe"
      @deleTeAll="deleTeAll" 
    ></ShoppingCart>
    
  </div>
</template>

<script>
import ShoppingCart from "@/components/ShoppingCart.vue";
export default {
  components: {
    ShoppingCart,
  },
  data() {
    return {
      list: [
        {
          name: '凌美Lamy Safari钢笔/签字笔T52黑色墨水<',
          id: 0,
          oldPrice: 158.00,
          price: 129.00,
          count: 1,
          img: 'https://img-blog.csdnimg.cn/20200520143727974.jpg',
          isSelected: true
        },
        {
          name: '凌美Lamy Safari钢笔/签字笔T52黑色墨水<',
          id: 1,
          oldPrice: 158.00,
          price: 145.00,
          count: 0,
          img: 'https://img-blog.csdnimg.cn/20200520143752215.jpg',
          isSelected: false
        },
        {
          name: '德国进口 凌美(LAMY)签字笔钢笔墨水水笔专用一次性墨水胆笔芯5支一盒T10德国进口',
          id: 2,
          oldPrice: 158.00,
          price: 130.00,
          count: 1,
          img: 'https://img-blog.csdnimg.cn/20200520143746317.jpg',
          isSelected: true
        }
      ],
      isNumber: 0,

    }
  },

  // 方法集合
  methods: {
    // 删除按钮
    deleTe(id) {
      this.list = this.list.filter((item) => item.id !== id)
    },
    // 删除选中所有
    deleTeAll() {
      this.list = this.list.filter((item) => !item)
    },
  },

  // 计算属性
  computed: {
    // 设置全选属性
    isCheckAll: {
        get() {
            return this.list.every(item => item.isSelected === true )
        },
        set(value) {
          this.list.forEach(item => item.isSelected = value)
        },
    }
  },

  // 属性监听
  watch: {
    friend: {
      'list.isSelected' () {},
    }
  },
}
</script>

<style>
/* 公共样式 */
.clearfix {
  content: '';
  display: block;
  clear: both;
}

.red {
  color: #f30213;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/* 清除默认样式 */
* {
  margin: 0px;
  padding: 0px;
  font-size: 14px;
}

a {
  text-decoration: none;
  color: #333;
}

input {
  outline: none;
}

.wrap {
  width: 1180px;
  margin: 0 auto;
}

.wrap .location {
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}


</style>
